<template>
  <div>
    <div class="loading-box" v-if="isLoading">
      <loading></loading>
    </div>
    <div class="home" v-else>
      <swiper :options="swiperOption" ref="mySwiper">
        <swiper-slide 
          v-for="item in banners" 
          :key="item.app_store_id"
          >
          <img class="banner" :src="item.banner_pic" @click="skip(item)" >
        </swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination"  slot="pagination"></div>
      </swiper>
      <div class="adverts">
        <div class="advert-dot"></div>
        <swiper :options="advertOption">
          <swiper-slide 
            v-for="(item, index) in adverts" 
            :key="index">
            <p v-html="item.success_case"></p>
          </swiper-slide>
        </swiper>
      </div>
      <div class="title">热门贷款<i class="icon-hot"></i></div>
      <div class="contents">
        <ad-item 
          v-for="(item, index) in ads" 
          :key="index" 
          :data="item"
          @click.native="toDetail(item)"
          >
        </ad-item>
      </div>
    </div>
  </div>
</template>
<script>
// 短信推广
import AdvertItem from '@/components/AdvertItem'
import AdItem from '@/components/AdItem'
import { mapGetters } from 'vuex'
export default {
  components: {
    AdvertItem,
    AdItem
  },
  computed: {
    ...mapGetters({
      info: 'global/info'
    }),
    banners () {
      return this.data.ad_banner_vos || []
    },
    adverts () {
      return this.data.ad_success_cases || []
    },
    ads () {
      if (!this.data.ad_list_vos) return []
      return Array.from(this.ids, id => {
        return this.data.ad_list_vos.find(item => item.id === id)
      })
    }
  },
  data () {
    return {
      ids: [64, 53, 44, 55, 54],
      isLoading: false,
      url: '',
      data: {},
      swiperOption: {
        autoplay: 3000,
        pagination: '.swiper-pagination',
        mousewheelControl: true,
        observeParents: true
      },
      advertOption: {
        autoplay: 3000,
        direction: 'vertical',
        mousewheelControl: false
      }
    }
  },
  created () {
    if (Object.keys(this.$route.query).length === 3) {
      let { source_app, user_id, idfa } = this.$route.query
      this.$store.dispatch('global/setInfo', {source_app, user_id, idfa})
    }
    this.isLoading = true
    this.$api.get('ads/index').then((res) => {
      this.data = res.data
      this.isLoading = false
    })
  },
  methods: {
    skip (item) {
      this.$router.push({ name: 'Detail', params: { id: item.app_store_id } })
      try {
        window.ga && window.ga('send', 'event', '产品Banner', 'click', item.title)
      } catch (e) {}
    },
    toDetail (item) {
      this.$router.push({ name: 'Detail', params: { id: item.app_store_id } })
      try {
        window.ga && window.ga('send', 'event', '产品列表', 'click', item.title)
      } catch (e) {}
    }
  }
}
</script>

<style lang="scss">
@import '~@/scss/base.scss';
.swiper-container{
  height: calc(100vw * 336 / 750);
}
.swiper-pagination-bullet-active{
  background: white;
}
.banner {
  width: 100%;
}
.title {
  text-align: left;
  padding: 10px;
  font-size: $title-size;
  display: flex;
  align-items: center;
  padding-left: 22px;
  color: $hint-color;
}
.adverts {
  display: flex;
  align-items: center;
  margin-top: 1px;
  height: 20px;
  background: white;
  color: $hint-color;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  padding: 3px 10px;
  .advert-dot{
    background: red;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    margin-right: 5px;
    margin-left: 5px;
  }
  p {
    width: calc(100vw - 35px);
    text-overflow: ellipsis;
    display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
    -webkit-line-clamp: 1; /** 显示的行数 **/
    overflow: hidden;  /** 隐藏超出的内容 **/
  }
  .swiper-container{
    margin-top: 1px;
    height: 20px;
  }
}

.icon-hot{
  height: 20px;
  width: 20px;
  background: url('~@/assets/img/hot.png') no-repeat center;
  background-size: 11px 15px;
}
</style>

